<template>
	<view class="">
		<view class=" p10  " style="background-color:#FFF;">
			<view class="flex1">
				<view :class="['','ptb-20','midItem',midIndex==0?'midActive':'midActive1']" @click="changeMid(0)">
					藏品
				</view>
				<view :class="['','ptb-20','midItem',midIndex==1?'midActive':'midActive1']" @click="changeMid(1)">
					盲盒
				</view>
			</view>
			<view class="selectbox ml-10 flex flex-between">
				<view v-for="item in tabs"
					:class="['plr-20','ptb-12',item.active==true?'selectitem':'selectitem1']"
					@click="change(item)">{{item.name}}</view>
			</view>
		<!-- 	<u-tabs style='height: 40px;'  font-size="26" class=" mt-20" active-color="" inactive-color=""
				bg-color="transparent" :list="tabs" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
		</view>
		<empty v-if="list.length==0"></empty>
		<view class="min100 plr-30  ptb-40 bg" v-else>
			<view class="flex flex-start flex-top mb-30 radius-20 plr-30 ptb-30 " v-for="(item,index) in list"
				style="background-color: #fff;" :key="index">
				<image :src="item.image" class="itemImg mr-20 radius-20"></image>
				<view style="width:72%;" class="">
					<view class="flex1 flex-between">
						<view class="fw size-28">
							{{item.name}}
						</view>
						<view class="size-44">
							￥{{item.price}}
						</view>
					</view>


					<view class="size-24 mt-20  " style="text-align: right;">
						<text v-if="item.status==0">待付款</text>
						<text v-if="item.status==1">已付款</text>
						<text v-if="item.status==2">已取消</text>
					</view>

					<view class=" size-20 mt-20" style="text-align: right;">
						{{item.create_time}}
					</view>
					<view class="flex mt-40 btnWrap" style="float: right;" v-if="item.status==0">
						<u-button @click="cancelOrder(item.id)" round class="transferBtn mr-30">取消订单</u-button>
						<u-button round class="saleBtn" @click="payOrder(item.order_id)">去支付</u-button>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
					active: true,
				index:'',
				// activeitemstyle:{'color':'red'},
				midIndex: 0,
				tabs: [{
					name: '全部',
					id:0,
					// active:true
				}, {
					name: '待付款',
					id:1,
					// active:false
				}, {
					name: '已付款',
					id:2,
					// active:false
				}, {
					name: '已取消',
					id:3,
					// active:false
				}],
				current: 0,
				page: 1,
				pagesize: 10,
				status: "",
				loadStatus: 'loadmore',
				list: []
			}
		},
		onShow() {
			this.init();
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.init()
		},
		onReachBottom() {
			//避免多次触发
			if (this.loadStatus == 'loading' || this.loadStatus == 'nomore') {
				return;
			}
			this.init()
		},
		methods: {
			// 取消订单
			cancelOrder(id) {
				let _this = this;
				if (this.midIndex == 0) {
					// 藏品
					uni.showModal({
						title: '提示',
						content: '确定取消订单?',
						confirmColor: '#EFAA1C',
						success: function(res) {
							if (res.confirm) {
								_this.$http('api/orders/cancelGoodsOrder', {
									id: id
								}, 'POST').then(res => {
									_this.list = [];
									_this.page = 1;
									_this.current = 3;
									_this.status = 2;
									_this.init();
								})
							} else if (res.cancel) {
								uni.showToast({
									title: "取消操作!",
									icon: "none"
								})
							}
						}
					});
				} else {
					// 盲盒
					uni.showModal({
						title: '提示',
						content: '确定取消订单?',
						confirmColor: '#EFAA1C',
						success: function(res) {
							if (res.confirm) {
								_this.$http('api/orders/cancelBoxOrder', {
									id: id
								}, 'POST').then(res => {
									_this.list = [];
									_this.page = 1;
									_this.current = 3;
									_this.status = 2;
									_this.init();
								})
							} else if (res.cancel) {
								uni.showToast({
									title: "取消操作!",
									icon: "none"
								})
							}
						}
					});
				}

			},
			// 去支付
			payOrder(order_id) {
				if (this.midIndex == 0) {
					//藏品
					uni.navigateTo({
						url: '../pay/collectPay?order_id=' + order_id
					})
				} else {
					// 盲盒
					uni.navigateTo({
						url: '../pay/boxPay?order_id=' + order_id
					})
				}
			},
			// 选择是版权品还是盲盒
			changeMid(index) {
				console.log(index);
				this.midIndex = index;
				this.list = [];
				this.page = 1;
				this.init();
			},
			goDetails(item) {
				uni.navigateTo({
					url: "./orderDetails"
				})
			},
			init() {
				if (this.midIndex == 0) {
					//藏品
					this.$http('api/orders/goodsOrderList', {
						page: this.page,
						pagesize: 10,
						status: this.status
					}).then(res => {
						let data = res.data
						if (this.list >= res.count) {
							this.loadStatus = "nomore"
						} else {
							this.page = this.page + 1
							this.loadStatus = "loadmore"
						}
						this.list = this.list.concat(data)
						uni.stopPullDownRefresh();
					})
				} else {
					// 盲盒
					this.$http('api/orders/boxOrderList', {
						page: this.page,
						pagesize: 10,
						status: this.status
					}).then(res => {
						let data = res.data
						if (this.list >= res.count) {
							this.loadStatus = "nomore"
						} else {
							this.page = this.page + 1
							this.loadStatus = "loadmore"
						}
						this.list = this.list.concat(data)
						uni.stopPullDownRefresh();
					})
				}
			},
			change(item) {
				console.log(index,item);
				for (let i = 0; i < this.tabs.length; i++) {
					this.tabs[i].active = false
				}
				item.acitve=true
			 
				// this.current = index;
				// if (index == 0) {
				// 	this.status = '';
				// } else {
				// 	this.status = Number(index - 1);
				// }
				// this.list = [];
				// this.page = 1;
				// this.init();
			}
		}
	}
</script>

<style lang="less" scoped>
	.selectitem,
	.selectitem1 {
		flex-grow: 0;
		flex-shrink: 0;
		font-size: 16rpx;
		color: #999;
		margin: 0 10rpx;
		border-radius: 40rpx;
		background-color: rgb(246, 246, 246);
	}
	
	.selectitem {
		color: #fff;
		background-color: rgb(0, 203, 211);
	}
	page {
		background-color: #F5F5F5;
	}

	::v-deep  .u-tab-item {
		// border: 2px solid #999;
		border-radius: 30px;
		margin: 0 20px 0 0;
		font-weight: 100 !important;
		
	}
 
	.itemImg {
		width: 260rpx;
		height: 220rpx;
	}

	.btnWrap {
		::v-deep .u-tab-bar {
			// margin: 0 0 0 -7px !important;

		}

		::v-deep  uni-button {
			height: 60rpx !important;
			padding: 0 30rpx !important;
			font-size: 22rpx;
		}

		.transferBtn {
			background: #44ACFF;
			color: #fff;
		}

		.saleBtn {
			background: transparent;
			border: 1rpx solid #fff;
		}
	}

	.midItem {
	    width: 80rpx;
	    height: 70rpx;
	    color: #999;
	    font-size: 26rpx;
	    text-align: center;
	    margin: 0 30rpx 0px 40rpx;
	
	}

	.midActive {
		border-bottom: 2px solid #000;
		// border: 2px solid #000;
		// color: #000;
		// border-bottom:1px solid #000;
	}
	.midActive1 {
		
		// border: 2px solid #000;
		// color: #000;
		// border-bottom:1px solid #000;
	}
</style>
